<template>
  <dynamic-table ref="tableRef" :columns="columns" :page-option="pageOption" :get-list-func="serverlogList" rowKey="id">
    <template v-slot:title>
      <a-select v-model:value="pageOption.type" style="width: 180px" placeholder="日志类型">
        <a-select-option v-for="(value, key) in logTypes" :value="key" :key="key">
          {{ value }}
        </a-select-option>
      </a-select>
      <a-range-picker format="YYYY-MM-DD" style="width: 220px" @change="dateChange" />
      <a-input v-model:value="pageOption.account" style="width: 140px" placeholder="操作人" />
      <a-button type="primary" @click="tableQuery">查询</a-button>
      <div class="operate">
        <a-button type="primary" @click="exportTable">导出本页数据</a-button>
        <!-- <a-button type="primary" @click="deleteData">删除</a-button> -->
      </div>
    </template>
  </dynamic-table>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, createVNode, toRaw, ref } from 'vue'
import { Modal, DatePicker, Select } from 'ant-design-vue'
import DynamicTable from '@/components/dynamic-table.vue'
import { serverlogList, serverlogDelete } from '@/api/log/serverlog'
import { formatDate } from '@/utils/common'
import { columns } from './columns'
import { logTypes } from './logTypes'
import { jsonToSheetXlsx } from '@/components/Excel'
export default defineComponent({
  name: 'permission',
  components: {
    DynamicTable,
    [DatePicker.RangePicker.name]: DatePicker.RangePicker,
    [Select.name]: Select,
    'a-select-option': Select.Option
  },
  setup() {
    const tableRef = ref<any>(null)

    const state = reactive({
      pageOption: {
        type: '0',
        begintime: '',
        endtime: '',
        account: ''
      },
      uploading: false,
      tableLoading: false
    })

    // 日期改变
    const dateChange = (date, date1) => {
      state.pageOption.begintime = date1[0]
      state.pageOption.endtime = date1[1]
    }

    const tableQuery = () => {
      const { pageOption } = tableRef.value
      const { current, pageSize } = pageOption
      const params = {
        page: current,
        limit: pageSize,
        ...state.pageOption
      }
      tableRef.value.refreshTableData(params)
    }

    //导出
    const exportTable = () => {
      jsonToSheetXlsx({
        data: tableRef.value.data.map(item => {
          return {
            type: item.type,
            time: formatDate(item.time),
            content: item.content,
            result: item.result,
            operatorname: item.operatorname
          }
        }),
        header: {
          type: '日志类型',
          time: '日志时间',
          content: '事件内容',
          result: '处理结果',
          operatorname: '记录人'
        },
        filename: '服务器日志.xlsx'
      })
    }

    //删除
    const deleteData = () => {
      console.log('object')
    }

    return {
      ...toRefs(state),
      columns,
      tableRef,
      logTypes,
      formatDate,
      serverlogList,
      tableQuery,
      dateChange,
      exportTable,
      deleteData
    }
  }
})
</script>

<style lang="scss" scoped>
.ant-table-title {
  > * {
    margin-right: 12px;
  }

  .operate {
    margin: 0 0 0 auto;
  }
}
</style>
